/*
 * @Author: silas 
 * @Date: 2021-06-01 14:29:31 
 * @Last Modified by: silas
 * @Last Modified time: 2021-06-10 09:34:20
 */
<template>
  <div class="onw_container">
    <header>
      <p>客户经理排名</p>
    </header>
    <el-form :inline="true" :model="form" class="main_searchBar">
      <el-form-item label="区域:">
        <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
      </el-form-item>
      <el-form-item label="账期:">
        <el-date-picker size="mini" v-model="form.month" value-format="yyyyMM" type="month" placeholder="选择年月" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item label="客户经理:">
        <el-input size="mini" v-model="form.manageName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="search()" type="primary" id="search_btn">查询</el-button>
        <el-button size="mini" type="success" id="export_btn" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>

    <ux-grid size="mini" id="tablePx" ref="tablePx" :header-row-style="{ background: '#eef1f6' }" border :stripe="true" :widthResize="true" :height="height" style="width: 100%" v-loading="showTableLoading" show-overflow="tooltip" show-header-overflow="title">
      <!-- <ux-table-column
                type="index"
                width="60"
                title="序号"
                fixed="left"
                align="center"
            /> -->
      <ux-table-column title="分局" field="PARENT_NAME" align="center" min-width="130" />
      <ux-table-column title="支局" field="AREA_NAME" align="center" min-width="130" />
      <ux-table-column title="客户经理" field="MANAGER_NAME" align="center" min-width="130" />
      <ux-table-column :title="item.label" v-for="(item, i) in titles" :key="'item' + i" align="center">
        <ux-table-column v-for="(it, index) in item.children" :key="'it' + index" :title="it.label" :field="it.value" align="center" min-width="100" />
      </ux-table-column>
    </ux-grid>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import qs from "qs";
import { getCookie, setCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      form: {
        areaId: "",
        month: this.moment().subtract(1, "months").format("YYYYMM"),
        manageName: "",
      },
      pickerOptions: this.pickerDisabled(),
      disabledTime: this.moment().subtract(1, "months").format("YYYYMM"),
      showTableLoading: false,
      height: window.innerHeight - 60 - 30 - 175,
      tableData: [],
      columns: [],
      titles: [],
    };
  },
  methods: {
    getHeight() {
      this.height = window.innerHeight - 60 - 30 - 175;
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },
    // 初始化列表接口
    getInitList() {
      var that = this,
        data = [];

      that.showTableLoading = true;
      $budgetAPI.listCustOwnData(
        that.form,
        (res) => {
          if (res.code == 0) {
            that.columns = Array.from(
              new Array(res.content.key.length),
              (it) => (it = { label: "", value: "" })
            ).slice(3);
            // debugger
            res.content.key.slice(3).map((it, i) => {
              that.columns[i]["value"] = it;
            });
            res.content.title.slice(3).map((it, i) => {
              that.columns[i]["label"] = it;
            });
            res.content.names.map((it, i) => {
              var obj = {
                label: it,
                children: that.columns.slice(i * 6, i * 6 + 6),
              };
              data.push(obj);
            });
            that.titles = data;
            that.tableData = res.content.data;
            that.$refs.tablePx.reloadData(that.tableData);
          } else {
            that.tableData = [];
            that.$refs.tablePx.reloadData([]);
          }
          that.showTableLoading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    search() {
      this.getInitList();
    },
    handle_export() {
      const { form } = this;
      var params = {
        ...form,
        token: getCookie("token"),
      };
      window.open(
        `${url}/governmentCust/exportCustOwnData?${qs.stringify(params)}`,
        "_self"
      );
    },
    async initDate() {
      this.getInitList();
    },
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.form.areaId = this.accountInfo.areaId;
    this.initDate();
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.onw_container {
  width: 100%;
  height: 100%;
  & > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .page_box {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
